<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }


        div {
            width: 100px;
            height: 100px;
            background-color: red;


            transition: all 2s ease 1s;
            /* 速写属性，2s是持续时间，1s是延迟时间 */

            transition: width 1s linear;
            /* 写三个用的比较多，延迟时间默认为0 */

            transition: width 1s;
            /* 写两个也可以，后面两个取默认值 */

            transition: width 2s, height 1s;
            /* 设置多个属性不同的过渡，整体逗号隔开 */
            /* width过渡时间为2s，height为1s */

            transition-property: all;
            /* 监听所有支持动画的属性，用的最多 */
            transition-property: width, height;
            /* 监听确定的属性，多个属性逗号隔开 */
            /* 
            默认值：all
            none: 不指定过渡的属性
             */



            transition-delay: 1s;
            /* 过渡延迟时间，逗号隔开，一样的 */
            /* 
            默认值：0
            
             */

            transition-duration: 2s;
            /* 动画持续时间，写多个值逗号隔开，用来设置两个属性的过渡不一样，分别设置*/
            /* 
            默认值：0
            
             */

            transition-timing-function: ease-in;
            /* 运动过程中的运动状态函数，多个值你懂得，逗号 */
            /* 
            默认值：ease
            linear, ease-in, ease-out，ease-in-out: 单词的值，对应具体的贝塞尔曲线
            
            其它值后面讲
            
            step-start
            step-end
            steps()
            cubic-bezier()
             */
        }

        div:hover {
            width: 200px;
            height: 200px;
        }



    </style>
</head>
<body>
    <div></div>
</body>
</html>